<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>加载城市</title>
	</head>

	<body>

		<span>城市</span>
		<select id="city">
			<option>--------------------------</option>
		</select>
		<br /><br />
		<button id="loadBtn">加载城市</button>
	</body>

	<script type="text/javascript">
		window.onload = function() {

			var sel = document.getElementById("city");
			var btn = document.getElementById("loadBtn");
			var citys = ["北京", "上海", "广州", "深圳"];
			btn.addEventListener("click", loadAllCity, false);

			function loadAllCity() {
				// 每次加载的时候先清空之前的
				clearOption();
				for(var i = 0; i < citys.length; i++) {
					var option = document.createElement("option");
					option.innerHTML = citys[i];
					sel.appendChild(option);

				}

			}
			
			function clearOption(){
				var len = citys.length;
				for(var i=0;i<len;i++){
					if(sel.childElementCount>1){
						sel.removeChild(sel.getElementsByTagName("option")[1]);
					}
					
				}
				
			}

		}
	</script>

</html>